import React, { useState, useEffect } from 'react';
import { Button, Checkbox, Form, Input, Tabs, message, Card } from 'antd';
import { UserOutlined, UnlockOutlined, SafetyCertificateOutlined, LockOutlined } from '@ant-design/icons';
import axios from 'axios';
import { useHistory } from 'react-router-dom';
import './lgoincss.css';
import { resolveRole, storeAuth } from '../api/user';
// 生成6位随机验证码（数字+字母混合）
const generateVerifyCode = () => {
  const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
  let code = '';
  for (let i = 0; i < 6; i++) {
    code += chars[Math.floor(Math.random() * chars.length)];
  }
  return code;
};

export default function Login() {
  // 状态管理
  const [generatedCode, setGeneratedCode] = useState('');
  const [isLoading, setIsLoading] = useState(false); // 注册加载状态
  const [loginLoading, setLoginLoading] = useState(false); // 登录加载状态
  const [registerForm] = Form.useForm();
  const [activeTabKey, setActiveTabKey] = useState('login');
  const [loginType, setLoginType] = useState('admin'); // 添加登录类型选择状态，默认管理员
  const history = useHistory(); // 路由跳转实例

  // 点击获取/刷新验证码
  const getVerifyCode = () => {
    const code = generateVerifyCode();
    setGeneratedCode(code);
    console.log('生成的验证码：', code);
    message.success('验证码已刷新！');
  };

  // 根据账号类型判断使用哪个登录接口
  const determineLoginType = (username) => {
    // 管理员关键词列表
    const adminKeywords = ['admin', 'manager', '管理员', '管理'];
    // 判断用户名是否包含管理员关键词
    return adminKeywords.some(keyword => 
      username.toLowerCase().includes(keyword.toLowerCase())
    ) ? 'admin' : 'user';
  };

  // 🔴 修复：登录表单提交（移除嵌套 try/catch，适配后端返回格式）
  const handleLogin = async (values) => {
    console.log('登录表单数据：', values);
    console.log('选择的登录类型：', loginType);

    // 1. 验证码校验
    if (!generatedCode) {
      message.warning('请先获取验证码！');
      return;
    }
    if (values.code.toLowerCase() !== generatedCode.toLowerCase()) {
      message.error('验证码错误，请重新输入！');
      return;
    }

    // 2. 权限验证：检查账号类型与选择的登录类型是否匹配
    const isAdminAccount = values.username.toLowerCase() === 'admin';
    
    if (loginType === 'admin' && !isAdminAccount) {
      message.error('你没有管理员权限');
      setLoginLoading(false);
      return;
    }
    
    if (loginType === 'user' && isAdminAccount) {
      message.error('你没有用户权限');
      setLoginLoading(false);
      return;
    }
    
    // 3. 使用用户选择的登录类型
    const loginApi = loginType === 'admin' 
      ? 'http://localhost:8080/admin/login' 
      : 'http://localhost:8080/user/login';
    
    console.log(`使用${loginType}登录接口: ${loginApi}`);

    // 3. 发起登录接口请求（仅一层 try/catch）
    setLoginLoading(true);
    try {
      const response = await axios.post(
        loginApi,
        { username: values.username, password: values.password },
        {
          headers: { 'Content-Type': 'application/json' },
          timeout: 5000,
        }
      );

      console.log('登录接口返回数据：', response.data);
      // 解析后端实际返回字段（status/description/body）
      const { status, description, body } = response.data;
      const token = body?.token || response.data?.token; // 兼容不同的返回格式

      // 4. 登录成功判断（status=200 且有 token）
      if (status === 200 && token) {
        // 确定用户角色
        const role = resolveRole({
          ...body,
          ...response.data,
          role: loginType // 默认为登录类型对应的角色
        });
        
        // 存储用户信息和角色
        storeAuth({
          token: token,
          userId: body?.userId || response.data?.userId,
          username: body?.username || response.data?.username || values.username,
          role: role
        });

        message.success(description || `登录成功！即将跳转${role === 'admin' ? '管理' : '用户'}首页`);
        
        // 延迟跳转 - 所有登录都跳转到admin路由，后续根据角色显示不同菜单
        setTimeout(() => {
          history.push('/admin');
          setGeneratedCode(''); // 清空验证码
        }, 1000);
      } else {
        // 业务失败（如用户名密码错误）
        message.error(`登录失败：${description || '用户名或密码错误'}`);
      }
    } catch (error) {
      // 捕获接口异常
      console.error('登录接口异常详情：', error);
      if (error.response) {
        message.error(`登录失败：${error.response.status} - ${error.response.statusText}`);
      } else if (error.request) {
        message.error('网络异常，请检查后端服务是否启动！');
      } else {
        message.error(`登录失败：${error.message}`);
      }
    } finally {
      setLoginLoading(false); // 关闭加载状态
    }
  };

  // 🔴 修复：注册表单提交（适配后端返回格式）
  const handleRegister = async (values) => {
    if (isLoading) return;
    setIsLoading(true);

    try {
      const apiUrl = 'http://localhost:8080/user/registered';
      const response = await axios.post(
        apiUrl,
        { username: values.username, password: values.password },
        {
          headers: { 'Content-Type': 'application/json' },
          timeout: 5000,
        }
      );

      console.log('注册接口返回数据：', response.data);
      // 解析后端实际返回字段（和登录接口一致）
      const { status, description } = response.data;

      // 注册成功判断（status=200）
      if (status === 200) {
        message.success(description || '注册成功！请登录');
        registerForm.resetFields(); // 清空表单
        setActiveTabKey('login'); // 切换到登录页
      } else {
        message.error(`注册失败：${description || '未知错误'}`);
      }
    } catch (error) {
      console.error('注册接口异常详情：', error);
      if (error.response) {
        message.error(`接口请求失败：${error.response.status} - ${error.response.statusText}`);
      } else if (error.request) {
        message.error('网络异常，请检查后端服务是否启动！');
      } else {
        message.error(`注册失败：${error.message}`);
      }
    } finally {
      setIsLoading(false);
    }
  };

  // 表单校验失败回调
  const onFinishFailed = (errorInfo) => {
    console.log('表单校验失败：', errorInfo);
    message.error('请完善表单信息！');
  };
  

  // Tabs 配置
  const items = [
    {
      key: 'login',
      label: '登录',
      children: (
        <Form
          name="login"
          labelCol={{ span: 0 }}
          wrapperCol={{ span: 24 }}
          initialValues={{ remember: true }}
          onFinish={handleLogin}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          {/* 添加登录类型切换按钮 */}
          <Form.Item>
            <div style={{ display: 'flex', gap: '12px', justifyContent: 'center', marginBottom: '16px' }}>
              <Button
                type={loginType === 'admin' ? 'primary' : 'default'}
                onClick={() => setLoginType('admin')}
                style={{ flex: 1 }}
              >
                管理员登录
              </Button>
              <Button
                type={loginType === 'user' ? 'primary' : 'default'}
                onClick={() => setLoginType('user')}
                style={{ flex: 1 }}
              >
                用户登录
              </Button>
            </div>
          </Form.Item>
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入你的账户' }]}
          >
            <Input
              prefix={<UserOutlined />}
              placeholder={loginType === 'admin' ? 'admin' : '用户名'}
            />
          </Form.Item>
          

          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password
              prefix={<UnlockOutlined />}
              placeholder='••••••'
            />
          </Form.Item>

          <Form.Item
            name="code"
            rules={[
              { required: true, message: '请输入验证码' },
              { len: 6, message: '验证码长度为6位' }
            ]}
          >
            <div style={{ display: 'flex', gap: '12px' }}>
              <Input
                prefix={<SafetyCertificateOutlined />}
                placeholder='请输入验证码'
                maxLength={6}
              />
              <Button
                type="primary"
                onClick={getVerifyCode}
              >
                {generatedCode || '获取验证码'}
              </Button>
            </div>
          </Form.Item>

          

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              style={{ width: '100%', height: '40px', borderRadius: '4px' }}
              loading={loginLoading}
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      ),
    },
    {
      key: 'register',
      label: '注册',
      children: (
        <Form
          name="register"
          labelCol={{ span: 0 }}
          wrapperCol={{ span: 24 }}
          initialValues={{ remember: true }}
          onFinish={handleRegister}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          form={registerForm}
        >
          <Form.Item
            name="username"
            rules={[
              { required: true, message: '请输入你的账户' },
              { min: 3, message: '用户名至少3位' },
              { max: 20, message: '用户名最多20位' }
            ]}
          >
            <Input
              prefix={<UserOutlined />}
              placeholder='请设置用户名（3-20位）'
              variant="plain"
              style={{ borderRadius: '4px', border: '1px solid #eaeaea' }}
            />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[
              { required: true, message: '请输入密码' },
              { min: 6, message: '密码至少6位' },
              { max: 20, message: '密码最多20位' }
            ]}
          >
            <Input.Password
              prefix={<UnlockOutlined />}
              placeholder='请设置密码（6-20位）'
              variant="plain"
              style={{ borderRadius: '4px', border: '1px solid #eaeaea' }}
            />
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              style={{ width: '100%', height: '40px', borderRadius: '4px' }}
              loading={isLoading}
            >
              注册
            </Button>
          </Form.Item>
        </Form>
      ),
    },
  ];

  return (
    <div className='login'>
      <div className='login-overlay'></div>
      <Card className='login-card' bordered={false}>
        <div className='login-header'>
          <h2 className='login-title'>租房找房·管理系统</h2>
          <p className='login-subtitle'>专业的房屋租赁管理平台</p>
        </div>
        <div className='login-content'>
          <Tabs
            activeKey={activeTabKey}
            onChange={(key) => setActiveTabKey(key)}
            defaultActiveKey="login"
            centered
            items={items}
            className='login-tabs'
          />
        </div>
      </Card>
    </div>
  );
}